<template>
  <el-card class="my-appointments-card">
    <div class="title">我的专家预约</div>
    <el-table :data="appointments" style="width: 100%" :header-cell-style="headerCellStyle" :cell-style="cellStyle" :row-style="rowStyle">
      <el-table-column label="专家姓名">
        <template slot-scope="scope">
          <el-link type="success" @click="$emit('go-detail', scope.row.expertId)">{{ scope.row.expertName }}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="appointmentTime" label="预约时间" />
      <el-table-column prop="description" label="说明" />
      <el-table-column label="状态">
        <template slot-scope="scope">
          <el-tag :type="statusType(scope.row.status)" effect="dark">{{ statusText(scope.row.status) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status === 'pending'" type="danger" size="small" @click="cancelAppointment(scope.row.id)">取消</el-button>
          <el-button v-if="scope.row.status === 'approved'" type="success" size="small" @click="goChat(scope.row.expertId)">去聊天</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-empty v-if="!appointments.length" description="暂无预约记录" class="empty-block" />
  </el-card>
</template>
<script>
import { getMyAppointments, cancelAppointment } from '../../api/ExpertAppointmentController';
export default {
  name: 'ExpertMyAppointments',
  data() {
    return {
      userInfo: JSON.parse(localStorage.getItem('frontUser') || '{}'),
      appointments: [],
      headerCellStyle: {
        background: '#f5f5f5',
        color: '#333333',
        fontWeight: '600',
        borderBottom: '1px solid #eaeaea'
      },
      cellStyle: {
        background: '#ffffff',
        color: '#333333',
        borderBottom: '1px solid #eaeaea'
      },
      rowStyle: {
        background: '#ffffff'
      }
    };
  },
  methods: {
    statusText(status) {
      switch (status) {
        case 'pending': return '待审核';
        case 'approved': return '已通过';
        case 'rejected': return '已拒绝';
        case 'cancelled': return '已取消';
        default: return status;
      }
    },
    statusType(status) {
      switch (status) {
        case 'pending': return 'warning';
        case 'approved': return 'success';
        case 'rejected': return 'danger';
        case 'cancelled': return 'info';
        default: return '';
      }
    },
    async cancelAppointment(id) {
      try {
        await cancelAppointment(id);
        this.$message.success('已取消预约');
        this.loadAppointments();
      } catch (e) {
        this.$message.error('取消预约失败，请稍后重试');
      }
    },
    async loadAppointments() {
      const res = await getMyAppointments(this.userInfo.id);
      this.appointments = (Array.isArray(res) ? res : (res.data || [])).map(item => ({
        ...item,
        expertName: (item.expertName) || ''
      }));
    },
    goChat(expertId) {
      this.$router.push({ name: 'UserChatIM', query: { expertId } });
    }
  },
  mounted() {
    this.loadAppointments();
  }
};
</script>
<style scoped>
.my-appointments-card {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 32px 32px 16px 32px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  background: #ffffff;
  border: 1px solid #eaeaea;
  max-height: 100%;
  overflow: auto;
}
.title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 24px;
  text-align: center;
  color: #333333;
  position: relative;
  display: inline-block;
  left: 50%;
  transform: translateX(-50%);
}
.title::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #4caf50 0%, #81c784 100%);
  border-radius: 2px;
}
.empty-block {
  margin: 40px 0 0 0;
  display: flex;
  justify-content: center;
}
:deep(.el-table) {
  background-color: #ffffff;
  color: #333333;
  border: 1px solid #eaeaea;
  border-radius: 8px;
}
:deep(.el-table::before) {
  display: none;
}
:deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
  background-color: #f9f9f9;
}
:deep(.el-tag--dark) {
  border: none;
}
:deep(.el-tag--dark.el-tag--success) {
  background: linear-gradient(90deg, #67c23a, #85ce61);
}
:deep(.el-tag--dark.el-tag--warning) {
  background: linear-gradient(90deg, #e6a23c, #ebb563);
}
:deep(.el-tag--dark.el-tag--danger) {
  background: linear-gradient(90deg, #f56c6c, #f78989);
}
:deep(.el-tag--dark.el-tag--info) {
  background: linear-gradient(90deg, #909399, #a6a9ad);
}
:deep(.el-button--success) {
  background: linear-gradient(90deg, #4caf50 0%, #81c784 100%);
  border: none;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}
:deep(.el-button--success:hover) {
  background: linear-gradient(90deg, #3b9c3f 0%, #6ebb71 100%);
  transform: translateY(-2px);
}
:deep(.el-button--danger) {
  background: linear-gradient(90deg, #f56c6c 0%, #f78989 100%);
  border: none;
  box-shadow: 0 4px 12px rgba(245, 108, 108, 0.3);
}
:deep(.el-button--danger:hover) {
  background: linear-gradient(90deg, #e45656 0%, #e67373 100%);
  transform: translateY(-2px);
}
:deep(.el-link--success) {
  color: #4caf50;
}
:deep(.el-link--success:hover) {
  color: #81c784;
}
:deep(.el-empty__description) {
  color: #666666;
}
@media (max-width: 1000px) {
  .my-appointments-card {
    width: 100%;
    padding: 24px 16px 16px 16px;
    min-width: 320px;
  }
  .el-table {
    font-size: 13px;
    overflow-x: auto;
  }
}
</style> 